<script setup>

import {inject, onMounted, ref} from "vue";
import {doDelete, doGet} from "../../util/request.js";
import {confirmMessage, showMessage} from "../../util/message.js";
import {useRouter} from "vue-router";

// 用户对象集合
let userList = ref([])
// 创建分页对象
let pageInfo = ref({})
// 定义一个路由对象
const router = useRouter()

// let company = inject('company')
const flushPage = inject('flushPage')

// 加载用户列表
const loadData = (current) => {
  // 分页参数
  let params = {
    current:current
  }

  doGet('/api/user/page',params)
      .then(resp => {
        if (resp.data.code === 200) {
          userList.value = resp.data.data.list
          pageInfo.value.total = resp.data.data.total
        } else {
          showMessage('查询用户列表失败，原因：'+resp.data.msg,'error')
        }
      })
}


// 跳转至用户详情页面
const toDetail = (id) => {
  router.push('/dashboard/user/detail/'+id)
}

// 跳转至用户编辑页面
const toEdit = (id) => {
  router.push('/dashboard/user/edit/'+id)
}

// 单个删除用户
const toDel = (id) => {
  confirmMessage('您确定要删除吗？')
      .then(()=>{
        // 发送删除的请求
        doDelete('/api/user/'+id,{}).then(resp=>{
          if (resp.data.code === 200) {
            showMessage('删除成功！', 'success');
            // 刷新局部页面
            flushPage()
          } else {
            showMessage('删除失败，原因：'+resp.data.msg,'error')
          }
        })
      })

}

let idArr = []
// 处理选中事件函数
const handleSelectionChange = (newSelection) => {
  idArr = []
  newSelection.forEach(item=>{
    idArr.push(item.id)
  })
  console.log(idArr)
}

// 批量删除用户
const toBatchDel = () => {
  // 判断用户是否选择了数据
  if (idArr.length <= 0) {
    showMessage('请选择要删除的数据!','warning')
    return
  }
  confirmMessage('您确定要批量删除吗？')
      .then(()=>{
        console.log("要删除的数据----- "+idArr)
        // 发送删除的请求
        doDelete('/api/user/batch/'+idArr,{}).then(resp=>{
          if (resp.data.code === 200) {
            showMessage('删除成功！', 'success');
            // 刷新局部页面
            flushPage()
          } else {
            showMessage('删除失败，原因：'+resp.data.msg,'error')
          }
        })
      })
}



// 页面加载完成后执行
onMounted(()=>{
  // 加载用户列表
  loadData(1)
})
</script>

<template>
  <el-button type="primary" @click="router.push('/dashboard/user/add')">添加用户</el-button>
  <el-button type="danger" @click="toBatchDel">批量删除</el-button>
  <div>&nbsp;</div>
  <el-table
      :data="userList"
      row-key="id"
      style="width: 100%"
      @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column label="序号" type="index" width="80" />
    <el-table-column label="帐号" property="loginAct"  width="200"/>
    <el-table-column label="姓名" width="120" property="name"/>
    <el-table-column label="手机号码" width="150" property="phone"/>
    <el-table-column label="邮箱" width="200" property="email"/>
    <el-table-column label="创建时间" width="200" property="createTime"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" size="small" @click="toDetail(scope.row.id)">
          详情
        </el-button>
        <el-button type="success" size="small" @click="toEdit(scope.row.id)">
          编辑
        </el-button>
        <el-button size="small" type="danger" @click="toDel(scope.row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <div>&nbsp;</div>

  <el-pagination
      background layout="prev, pager, next"
      :total=pageInfo.total
      @change="loadData"/>
</template>

<style scoped>




</style>